<template>
  <div class="template1">
    <div class="leftNav">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      <el-button type="primary" class="addMenu" plain size="small">部门管理</el-button>
    </div>
    <div class="subject" :style="'width:84%;height:'+(height+120)+'px'">
      <div class="head" id="head1">
        <div class="tit">
            员工管理
          <span class="add" @click="addPB('add')">添加员工</span>
        </div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item prop="region">
            <el-select size="mini" v-model="formInline.region" placeholder="区域商圈">
              <el-option label="杭州" value="hangzhou"></el-option>
              <el-option label="上海" value="shanghai"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="user">
            <el-input
              size="mini"
              v-model="formInline.user"
              placeholder="楼盘名称"
              style="border-right: red"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
        </el-form>
      </div>
      <el-main style="height:100% !important"></el-main>
      <el-footer id="foot">
        <el-pagination size="mini" background layout="total,sizes,prev, pager, next" :total="1000"></el-pagination>
      </el-footer>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          label: "家博",
          children: [
            {
              label: "上海"
            },
            {
              label: "杭州",
              children: [
                {
                  label: "综管部",
                  children: [
                    {
                      label: "四级 1-1-1"
                    }
                  ]
                },
                {
                  label: "运营部",
                  children: [
                    {
                      label: "四级 1-2"
                    }
                  ]
                },
                {
                  label: "管家部",
                  children: [
                    {
                      label: "管家一组"
                    },
                    {
                      label: "管家二组"
                    },
                    {
                      label: "管家三组"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      height: "",
      formInline: {
        user: "",
        region: ""
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSubmit() {
      console.log("submit!");
    }
  },
  mounted() {
    let height = `${document.documentElement.clientHeight}`;
    console.log(height);
    this.height = parseInt(height) - 182;
  }
};
</script>
<style scoped lang="less">
    @import "./template1.less";
</style>
